<template>
	<view>
		<view class="type_box">
			<view class="type_item" :class="current == index ? 'active' : ''" v-for="(item, index) in typeList" :key="index" @click="typeChage(index)">{{ item.name }}</view>
		</view>
		<view class="swiper_box"><u-swiper :list="bannerList" height="300"></u-swiper></view>
		<view class="news_list">
			<!-- <scroll-view scroll-y="true"> -->
			<view v-for="(item, index) in newsList" :key="index" class="news_item" @click="newsDetail(item.id)">
				<view class="news_left">
					<view class="title">{{ item.title }}</view>
					<view class="date">{{ item.date }}</view>
				</view>
				<image :src="item.imgUrl" mode=""></image>
			</view>
			<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
			<!-- </scroll-view> -->
		</view>
		<u-back-top :scroll-top="scrollTop" top="600"></u-back-top>
	</view>
</template>

<script>
export default {
	data() {
		return {
			scrollTop: 0,
			current: 0,
			typeList: [
				{
					name: '影视投资'
				},
				{
					name: '投资理财'
				},
				{
					name: '投资加盟'
				},
				{
					name: '投资分析'
				},
				{
					name: '项目专栏'
				},
				{
					name: '新手须知'
				}
			],
			bannerList: ['../../static/indexImage/10.png', '../../static/indexImage/10.png', '../../static/indexImage/10.png'],
			newsList: [
				{
					id: 0,
					title: '投资一部电影需要多少钱才能参与？',
					date: '2020-11-07 11:26',
					imgUrl: '../../static/indexImage/154.png'
				},
				{
					id: 1,
					title: '影视投资中个人份额如何获取？',
					date: '2020-11-06 09:54',
					imgUrl: '../../static/indexImage/16.png'
				},
				{
					id: 2,
					title: '院线电影的投资黄金期到了？',
					date: '2020-11-06 09:54',
					imgUrl: '../../static/indexImage/154.png'
				},
				{
					id: 3,
					title: '院线电影的投资黄金期到了？',
					date: '2020-11-06 09:54',
					imgUrl: '../../static/indexImage/154.png'
				},
				{
					id: 3,
					title: '院线电影的投资黄金期到了？',
					date: '2020-11-06 09:54',
					imgUrl: '../../static/indexImage/154.png'
				},
				{
					id: 3,
					title: '院线电影的投资黄金期到了？',
					date: '2020-11-06 09:54',
					imgUrl: '../../static/indexImage/154.png'
				},
				{
					id: 3,
					title: '院线电影的投资黄金期到了？',
					date: '2020-11-06 09:54',
					imgUrl: '../../static/indexImage/154.png'
				}
			],
			status: 'loadmore',
			iconType: 'flower',
			loadText: {
				loadmore: '轻轻上拉',
				loading: '努力加载中',
				nomore: '已经没有更多了~~~'
			}
		};
	},
	onLoad() {
		this.$http.post('Article/index',).then(async res => {
			console.log(res.data)
			
		})
	},
	methods: {
		typeChage(index) {
			this.current = index;
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		newsDetail(id) {
			uni.navigateTo({
				url: '../newsDetail/newsDetail?id=' + id
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.active {
	background: #373846;
	color: #ffffff !important;
}
.type_box {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	.type_item {
		text-align: center;
		min-width: 210upx;
		white-space: nowrap;
		padding: 13upx 5upx;
		border: 2upx solid #373846;
		color: #373846;
		margin-bottom: 30upx;
		font-size: 28upx;
	}
}
.swiper_box {
	border-radius: 10upx;
	margin-bottom: 50upx;
}
scroll-view {
	height: 43vh;
	width: 100%;
}
.news_list {
	.news_item {
		display: flex;
		margin-bottom: 30upx;
		position: relative;
		image {
			width: 225upx;
			height: 147upx;
			margin-left: 30upx;
		}
		.news_left {
			flex: 1;
		}
		.title {
			font-size: 32upx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}
		.date {
			position: absolute;
			bottom: 0;
			font-size: 24upx;
			color: $color-999;
		}
	}
	.btn_box {
		margin-top: 40upx;
	}
}
</style>

<style>
page {
	padding: 0 30upx;
}
</style>
